<template>
  <a-card>
    <a-row type="flex" justify="center" align="top">
      <a-col :span="16">
        <vditor :height="600" ref="editor" v-if="mode === '2'"/>
        <WangEditor :height="600" ref="editor" v-else/>
      </a-col>
      <a-col :span="8">
        <ArticleForm ref="articleForm"/>
        <div class="tool">
          <a-button type="primary" @click="save">保存</a-button>
        </div>
      </a-col>
    </a-row>
  </a-card>
</template>

<script>
import { getArticle } from '@/api/content'
import { WangEditor, Vditor } from '@/components'
import ArticleForm from './ArticeForm.vue'

export default {
  name: 'ArticleEdit',
  components: {
    WangEditor,
    ArticleForm,
    Vditor
  },
  data () {
    return {
      visible: false,
      mode: ''
    }
  },
  methods: {
    onClose () {
      this.visible = false
    },
    moreSet () {
      this.visible = true
    },
    save () {
      this.$refs.articleForm.save({
        content: this.$refs.editor.getContent(),
        articleType: 'HTML'
      })
    }
  },
  activated () {
    const id = this.$route.query.id
    this.mode = this.$route.query.mode
    if (id > 0) {
      getArticle(id).then(result => {
        const res = result.data
        this.$nextTick(() => {
          this.$refs.editor.setContent(res.content)
          this.$refs.articleForm.setForm(res)
        })
      })
    } else {
      this.$refs.editor.setContent('')
      this.$refs.articleForm.resetForm()
    }
  }
}
</script>

<style scoped>
 .mt-editor {
  line-height: normal !important;
  height: 500px;
  text-align: center;
  display: inline-block;
 }
</style>
<style lang="less">
 .tool{
   text-align: center;
 }
</style>
